<template>
    <div class="min-h-screen bg-gray-50 font-sans" v-if="post">
        <!-- 顶部导航 -->
        <header class="sticky top-0 z-30 bg-white shadow-sm">
            <div class="container mx-auto px-4 py-4 flex items-center justify-between">
                <button class="text-gray-700 hover:text-pink-500 transition-colors" @click="toUrl('/app')">
                    <i class="fa fa-arrow-left text-xl"></i>
                </button>
                <h1 class="text-lg font-medium text-gray-800">真实案例</h1>
                <div class="w-6"></div> <!-- 占位元素，保持布局平衡 -->
            </div>
        </header>

        <!-- 文章主体 -->
        <main class="container mx-auto px-4 py-6">
            <!-- 文章标题 -->
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 leading-tight mb-4">
                {{ post.title }}
            </h1>

            <!-- 封面图 -->
            <div
                class="relative w-full rounded-xl overflow-hidden mb-6 shadow-md transform transition-transform hover:scale-[1.01]">
                <img :src="post.image" alt="胶原蛋白修护" class="w-full h-auto object-cover">
            </div>

            <!-- 文章标签 -->
            <div class="flex flex-wrap gap-2 mb-8">
                <span class="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm font-medium">
                    胶原蛋白
                </span>
                <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
                    肌肤修护
                </span>
                <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium">
                    抗衰保养
                </span>
                <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">
                    科学护肤
                </span>
            </div>

            <!-- 文章内容 -->
            <article class="text-gray-700 leading-relaxed mb-12 space-y-6">
                <div v-html="post.content">
                    
                </div>
            </article>

            <!-- 评论区 -->
            <Comment :post-id="id" :post-type="type" class="mb-16" />
        </main>
    </div>
</template>

<script>
import Comment from '@/views/components/Comment.vue';
import { listLibrary, getLibrary, delLibrary, addLibrary, updateLibrary } from "@/api/demo/library";

export default {
    components: {
        Comment
    },
    data() {
        return {
            baseApi: process.env.VUE_APP_BASE_API,

            showModal: false,
            showResult: false,
            collagenTips: '',
            post: null,
            id: 0,
            type: 'Case',
        };
    },
    created() {
        this.id = this.$route.query.id;
        this.type = this.$route.query.type;
        this.init();
    },

    methods: {
        init() {
            if(this.type == 'app') {
                this.getApp();
            } else {
                this.getCase();
            }
        },
        getCase() { 
            getLibrary(this.id).then(res => {
                if (res.code == 200) {
                    this.post = res.data;
                }
            });
        },
        getApp() {
            getCover(this.id).then(res => {
                if (res.code == 200) {
                    this.post = res.data;
                }
            });
        },
        toUrl(url) {
            this.$router.push(url);
        },
        submitAge() {
            this.$router.push('/mr/guwen');
            return
            if (!this.selectedAge) return;

            // 根据年龄设置对应的胶原修护重点
            switch (this.selectedAge) {
                case '20-25':
                    this.collagenTips = '20-25岁胶原修护重点：预防为主，注重保湿和防晒，避免胶原蛋白过早流失，可适当补充基础胶原蛋白肽。';
                    break;
                case '26-30':
                    this.collagenTips = '26-30岁胶原修护重点：加强内源性胶原蛋白合成，使用含维生素C、肽类成分的产品，配合规律作息。';
                    break;
                case '31-35':
                    this.collagenTips = '31-35岁胶原修护重点：刺激胶原蛋白再生，可尝试含视黄醇、玻色因等成分的抗衰产品，结合适度运动。';
                    break;
                case '35+':
                    this.collagenTips = '35+岁胶原修护重点：综合修护方案，内外结合补充，选择具有多重抗衰成分的产品，注重整体肌肤健康。';
                    break;
            }

            this.showModal = false;
            this.showResult = true;
        }
    }
};
</script>

<style scoped>
/* 基础样式补充 */
input[type="radio"]:checked+span {
    color: #ca7599;
    font-weight: 500;
}

input[type="radio"]:checked {
    accent-color: #ca7599;
}
</style>